<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas example</title>

<script type="text/javascript">
	window.onload=function(){
		var canvas = document.getElementById("mycanvas");
		var ctx=canvas.getContext("2d");
		ctx.strokeStyle="#ff0000";
		ctx.strokeRect(100,100,300,300);
		ctx.fillStyle="#00ffff";
		ctx.fillRect(200,200,100,100)
		var color=new Array("#ff0000","#00ff00","#0000ff","#ffff00","#00ffff","#ff00ff","#000000","#212121","#cccccc");
		var j=0;
		for(i=10;i<500;i=i+60){
			ctx.fillStyle=color[j];
			ctx.fillRect(i,450,55,55);
			j++;
		}
	}
	
</script>

</head>
<body>
	<canvas id="mycanvas" width="600px" height="500px">
	</canvas>
</body>
</html>